<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitLab提交日志分析工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <script src="https://unpkg.com/splitting@1.0.6/dist/splitting.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/splitting@1.0.6/dist/splitting.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
            min-height: 100vh;
        }
        .hero-title {
            font-family: 'Noto Serif SC', serif;
            background: linear-gradient(135deg, #2d3748, #4299e1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .floating-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #4299e1;
            border-radius: 50%;
            opacity: 0.6;
        }
        .progress-bar {
            background: linear-gradient(90deg, #48bb78, #4299e1);
            transition: width 0.3s ease;
        }
        .btn-primary {
            background: linear-gradient(135deg, #4299e1, #2b6cb0);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(66, 153, 225, 0.3);
        }
        .status-indicator {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .tooltip {
            position: relative;
        }
        .tooltip:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #2d3748;
            color: white;
            padding: 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.875rem;
            white-space: nowrap;
            z-index: 10;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 z-50 glass-card border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-4">
                    <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
                        <span class="text-white font-bold text-sm">GL</span>
                    </div>
                    <h1 class="text-xl font-bold text-gray-800">GitLab分析工具</h1>
                </div>
                <div class="flex space-x-6">
                    <a href="index.html" class="text-blue-600 font-medium border-b-2 border-blue-600 pb-1">控制台</a>
                    <a href="config.html" class="text-gray-600 hover:text-blue-600 transition-colors">配置管理</a>
                    <a href="reports.html" class="text-gray-600 hover:text-blue-600 transition-colors">报告中心</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="pt-20 pb-12">
        <!-- 标题区域 -->
        <section class="relative overflow-hidden bg-gradient-to-br from-gray-50 to-blue-50 py-16">
            <div class="absolute inset-0 opacity-10">
                <img src="resources/hero-bg.jpg" alt="背景" class="w-full h-full object-cover">
            </div>
            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 class="hero-title text-4xl md:text-5xl font-bold mb-4" data-splitting>
                    智能提交日志分析
                </h2>
                <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
                    基于AI大模型的GitLab提交日志智能分析工具，自动生成专业的工作任务报告
                </p>
                <div class="flex justify-center space-x-4">
                    <div class="flex items-center space-x-2 text-sm text-gray-500">
                        <div class="w-2 h-2 bg-green-500 rounded-full status-indicator"></div>
                        <span>系统就绪</span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm text-gray-500">
                        <div class="w-2 h-2 bg-blue-500 rounded-full status-indicator"></div>
                        <span>AI模型已加载</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 主要功能区域 -->
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- 左侧面板 - 项目配置 -->
                <div class="glass-card rounded-2xl p-6 shadow-xl">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-xl font-bold text-gray-800">项目配置</h3>
                        <button onclick="openConfigModal()" class="text-blue-600 hover:text-blue-800 transition-colors tooltip" data-tooltip="管理配置">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                        </button>
                    </div>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">选择项目</label>
                            <select id="projectSelect" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <option value="">请选择项目</option>
                                <option value="project1">Web应用开发项目</option>
                                <option value="project2">移动应用开发</option>
                                <option value="project3">数据分析平台</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">仓库地址</label>
                            <input type="text" id="repoUrl" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="https://gitlab.com/username/project">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">访问令牌</label>
                            <input type="password" id="accessToken" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="输入GitLab访问令牌">
                        </div>
                        
                        <button onclick="testConnection()" class="w-full py-2 px-4 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors">
                            测试连接
                        </button>
                    </div>
                </div>

                <!-- 中间面板 - 时间选择 -->
                <div class="glass-card rounded-2xl p-6 shadow-xl">
                    <h3 class="text-xl font-bold text-gray-800 mb-6">时间范围</h3>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">快速选择</label>
                            <div class="grid grid-cols-2 gap-2">
                                <button onclick="setQuickDate('today')" class="py-2 px-3 text-sm bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-lg transition-colors">今天</button>
                                <button onclick="setQuickDate('week')" class="py-2 px-3 text-sm bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-lg transition-colors">本周</button>
                                <button onclick="setQuickDate('month')" class="py-2 px-3 text-sm bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-lg transition-colors">本月</button>
                                <button onclick="setQuickDate('quarter')" class="py-2 px-3 text-sm bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-lg transition-colors">本季度</button>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">开始日期</label>
                            <input type="date" id="startDate" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">结束日期</label>
                            <input type="date" id="endDate" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                        
                        <div class="bg-blue-50 p-3 rounded-lg">
                            <div class="text-sm text-blue-700">
                                <strong>选中范围：</strong> <span id="dateRange">请选择时间范围</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧面板 - 生成控制 -->
                <div class="glass-card rounded-2xl p-6 shadow-xl">
                    <h3 class="text-xl font-bold text-gray-800 mb-6">报告生成</h3>
                    
                    <div class="space-y-6">
                        <div class="text-center">
                            <button onclick="generateReport()" id="generateBtn" class="w-full btn-primary text-white font-bold py-4 px-6 rounded-xl text-lg shadow-lg">
                                <span id="btnText">🚀 生成分析报告</span>
                            </button>
                        </div>
                        
                        <!-- 进度指示器 -->
                        <div id="progressContainer" class="hidden">
                            <div class="mb-2 flex justify-between text-sm text-gray-600">
                                <span id="progressText">准备中...</span>
                                <span id="progressPercent">0%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div id="progressBar" class="progress-bar h-2 rounded-full" style="width: 0%"></div>
                            </div>
                        </div>
                        
                        <!-- 状态信息 -->
                        <div id="statusInfo" class="space-y-3">
                            <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                                <div class="flex items-center space-x-2">
                                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                                    <span class="text-sm text-green-700">系统状态</span>
                                </div>
                                <span class="text-sm font-medium text-green-800">就绪</span>
                            </div>
                            
                            <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                                <div class="flex items-center space-x-2">
                                    <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
                                    <span class="text-sm text-blue-700">AI模型</span>
                                </div>
                                <span class="text-sm font-medium text-blue-800">已加载</span>
                            </div>
                            
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                <div class="flex items-center space-x-2">
                                    <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
                                    <span class="text-sm text-gray-700">预计时间</span>
                                </div>
                                <span class="text-sm font-medium text-gray-800">2-5分钟</span>
                            </div>
                        </div>
                        
                        <!-- 快速操作 -->
                        <div class="border-t pt-4">
                            <h4 class="text-sm font-medium text-gray-700 mb-3">快速操作</h4>
                            <div class="space-y-2">
                                <button onclick="viewLastReport()" class="w-full py-2 px-3 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors">
                                    📊 查看上次报告
                                </button>
                                <button onclick="exportData()" class="w-full py-2 px-3 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors">
                                    💾 导出原始数据
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 统计概览 -->
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="glass-card rounded-2xl p-6 shadow-xl">
                <h3 class="text-xl font-bold text-gray-800 mb-6">统计概览</h3>
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                    <div class="text-center p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl">
                        <div class="text-3xl font-bold text-blue-600 mb-2" id="totalProjects">12</div>
                        <div class="text-sm text-blue-700">配置项目</div>
                    </div>
                    <div class="text-center p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-xl">
                        <div class="text-3xl font-bold text-green-600 mb-2" id="totalReports">156</div>
                        <div class="text-sm text-green-700">生成报告</div>
                    </div>
                    <div class="text-center p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl">
                        <div class="text-3xl font-bold text-purple-600 mb-2" id="totalCommits">2.3k</div>
                        <div class="text-sm text-purple-700">分析提交</div>
                    </div>
                    <div class="text-center p-4 bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl">
                        <div class="text-3xl font-bold text-orange-600 mb-2" id="avgTime">3.2min</div>
                        <div class="text-sm text-orange-700">平均处理时间</div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 配置管理模态框 -->
    <div id="configModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
        <div class="bg-white rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold text-gray-800">配置管理</h3>
                <button onclick="closeConfigModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="space-y-4">
                <p class="text-gray-600">即将跳转到配置管理页面，您可以在那里添加、编辑和删除GitLab仓库配置。</p>
                <div class="flex space-x-3">
                    <button onclick="closeConfigModal()" class="flex-1 py-2 px-4 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors">
                        取消
                    </button>
                    <button onclick="goToConfig()" class="flex-1 py-2 px-4 btn-primary text-white rounded-lg transition-colors">
                        前往配置
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p class="text-gray-400">© 2025 GitLab提交日志分析工具. 基于AI大模型的智能代码分析平台.</p>
        </div>
    </footer>

    <script>
        // 初始化函数
        document.addEventListener('DOMContentLoaded', () => {
            loadProjects();
            loadOverviewStats();
        });

        // 从API加载项目列表
        async function loadProjects() {
            try {
                const response = await fetch('/api/configs');
                const projects = await response.json();
                const projectSelect = document.getElementById('projectSelect');
                
                // 清空现有选项
                projectSelect.innerHTML = '<option value="">请选择项目</option>';

                // 添加从数据库获取的选项
                projects.forEach(project => {
                    const option = document.createElement('option');
                    option.value = project.id;
                    option.textContent = project.name;
                    projectSelect.appendChild(option);
                });
            } catch (error) {
                console.error('加载项目失败:', error);
            }
        }

        // 从API加载统计数据
        async function loadOverviewStats() {
            try {
                const response = await fetch('/api/overview-stats');
                const stats = await response.json();

                document.getElementById('totalProjects').textContent = stats.totalProjects;
                document.getElementById('totalReports').textContent = stats.totalReports;
                document.getElementById('totalCommits').textContent = (stats.totalCommits / 1000).toFixed(1) + 'k';
                document.getElementById('avgTime').textContent = stats.avgTime + 'min';
            } catch (error) {
                console.error('加载统计数据失败:', error);
            }
        }

        // 加载配置
        async function loadConfig(id) {
            try {
                const response = await fetch(`/api/configs/${id}`);
                const config = await response.json();
                
                if (config) {
                    currentConfig = config;
                    document.getElementById('repoUrl').value = config.gitlabUrl + '/' + config.projectName;
                    document.getElementById('accessToken').value = config.accessToken;
                    
                    // 显示成功消息
                    showNotification('配置已加载', 'success');
                }
            } catch (error) {
                console.error('加载配置失败:', error);
                showNotification('加载配置失败', 'error');
            }
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 项目选择变化
            document.getElementById('projectSelect').addEventListener('change', function() {
                const selectedIndex = this.value;
                if (selectedIndex !== '') {
                    loadConfig(selectedIndex);
                }
            });
            
            // 日期变化
            document.getElementById('startDate').addEventListener('change', updateDateRange);
            document.getElementById('endDate').addEventListener('change', updateDateRange);
            
            // 表单验证
            const inputs = document.querySelectorAll('input, select');
            inputs.forEach(input => {
                input.addEventListener('blur', validateInput);
            });
        }

        document.addEventListener('DOMContentLoaded', () => {
            setupEventListeners();
            loadProjects();
            loadOverviewStats();
        });
    </script>
    <script src="main.js"></script>
</body>
</html>